<template>
  <div class="edit">
    <div class="edit-top">
      <span>编辑小草班</span>
      <el-button @click="comfirm">确定</el-button>
    </div>
    <div class="edit-bottom">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >

        <el-form-item label="班级名称" prop="class_name" v-if="ruleForm.class_name">
          <el-select v-model="ruleForm.class_name" placeholder="请选择班级">
            <el-option label="萌芽班" value="1"></el-option>
            <el-option label="小草班" value="2"></el-option>
            <el-option label="灌木班" value="3"></el-option>
            <el-option label="大树班" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级名称" prop="class_id" v-else>
          <el-select v-model="ruleForm.class_id" placeholder="请选择班级">
            <el-option label="萌芽班" value="1"></el-option>
            <el-option label="小草班" value="2"></el-option>
            <el-option label="灌木班" value="3"></el-option>
            <el-option label="大树班" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课时:" prop="class_hour">
          <el-input v-model="ruleForm.class_hour" placeholder="请输入课时"></el-input>
        </el-form-item>
        <el-form-item label="水平:" prop="level">
          <el-input v-model="ruleForm.level" placeholder="请输入水平"></el-input>
        </el-form-item>
        <el-form-item label="字:" prop="word">
          <el-input v-model="ruleForm.word" placeholder="请输入字数"></el-input>
        </el-form-item>

        <el-form-item label="章节:" prop="chapterName" class="chapter" v-if="ruleForm.class_name">
          <el-input  v-model="ruleForm.chapterName" placeholder="请输入章节" clearable></el-input>
          <el-button @click="addChapter2" class="addChapter">添加</el-button>
        </el-form-item>
        <el-form-item label="章节:" prop="chapter_name" class="chapter" v-else>
          <el-input v-model="ruleForm.chapter_name" placeholder="请输入章节" clearable></el-input>
          <el-button @click="addChapter" class="addChapter">添加</el-button>
        </el-form-item>
        <el-form-item class="chapterList" v-if="ruleForm.class_name">
          <div v-for="(item, index) of ruleForm.chapter_name" :key="index"><p>{{item[0]}}</p> <span @click="deleteChapter2(index)"><a href="javascript:;">删除</a></span></div>
        </el-form-item>
        <el-form-item class="chapterList" v-else>
          <div v-for="(item, index) of chapterList" :key="index"><p>{{item[0]}}</p> <span @click="deleteChapter(index)"><a href="javascript:;">删除</a></span></div>
        </el-form-item>
        <el-form-item label="课程价格:" prop="course_price">
          <el-input v-model="ruleForm.course_price" placeholder="请输入价格"></el-input>
          <span>元</span>
        </el-form-item>
        <el-form-item label="课程+下线盒子价格:" prop="course_box_price">
          <el-input v-model="ruleForm.course_box_price" placeholder="请输入价格"></el-input>
          <span>元</span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {Message} from 'element-ui'
export default {
  props: {
    ruleForm: {
      type: Object,
      default: {}
    }
  },
  data() {
    let checkNumber = (rule, value, callback) => {
      if (!value) {
        callback(new Error('输入不能为空'))
      }
      if (isNaN(value)) {
        callback(new Error('请输入一个数'))
      } else {
        callback()
      }
    }
    let checkLevel = (rule, value, callback) => {
      if (!value) {
        callback(new Error('输入不能为空'))
      }
      if (!/^level/g.test(value)) {
        callback(new Error('请输入正确的level'))
      } else {
        callback()
      }
    }
    let checkInterge = (rule, value, callback) => {
      if (!value) {
        callback(new Error('输入不能为空'))
      }
      if (!Number.isInteger(Number(value))) {
        callback(new Error('请输入一个整数'))
        console.log(typeof value)
      } else {
        callback()
      }
    }
    return {
      chapterList: [],
      rules: {
        class_name:[{ required: true, message: "请选择班级", trigger: "blur" }],
        class_id: [
          { required: true, message: "请选择班级", trigger: "blur" }
        ],
        class_hour: [{ required: true, trigger: "blur", validator: checkNumber }],
        word: [{ required: true, trigger: "blur", validator: checkInterge }],
        level: [{ required: true, trigger: "blur", validator: checkLevel }],
        chapter_name: [{ required: true, message: "请输入章节", trigger: "blur" }],
        course_price: [{ required: true, trigger: "blur", validator: checkNumber}],
        course_box_price: [
          {
            required: true,
            trigger: "blur",
            validator: checkNumber
          }
        ],
        chapterName: [{ required: true, message: "请输入章节", trigger: "blur" }]
      }
    };
  },
  methods: {
    deleteChapter(index) {
      this.chapterList.splice(index, 1)
    },
    comfirm() {
      console.log(this.$route.params.id)
      let params
      if (this.$route.params.id !== undefined) {
        params = Object.assign({}, {id: this.ruleForm.id}, {class_id: this.ruleForm.class_id}, {level: this.ruleForm.level}, {class_hour: this.ruleForm.class_hour}, {word: this.ruleForm.word}, {chapter_name: JSON.stringify(this.ruleForm.chapter_name)}, {course_price: this.ruleForm.course_price}, {course_box_price: this.ruleForm.course_box_price})
      }
      
      if (this.$route.params.id === undefined) {
        params = Object.assign(this.ruleForm, {chapter_name: JSON.stringify(this.chapterList)})
      }
      this.$emit('editOrAdd', params)
      this.$router.push({ path: "/course/classList" })
      console.log(params)
    },
    addChapter() {
      this.chapterList.push([this.ruleForm.chapter_name]);
    },
    addChapter2() {
      this.ruleForm.chapter_name.push([this.ruleForm.chapterName]);
      console.log(this.ruleForm)
    },
    deleteChapter2(index) {
      this.ruleForm.chapter_name.splice(index, 1)
    },
  }
};
</script>
<style lang="scss" scoped>
.edit {
  padding: 20px;
  padding-top: 60px;
  .edit-top {
    display: flex;
    justify-content: space-between;
    span {
      font-size: 16px;
      color: #333;
      font-weight: bold;
    }
  }
}
.edit-bottom {
  .el-select {
    width: 350px;
  }
  .el-input {
    width: 350px;
  }
  .el-form-item /deep/ .el-form-item__content {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    span {
      margin-left: -22px;
      position: relative;
      z-index: 999;
    }
  }
  .el-form-item /deep/ .el-form-item__label {
    white-space: nowrap;
    width: 150px !important;
  }
  .el-form-item /deep/ .el-input {
    vertical-align: top;
  }
}
.el-button {
  width: 87px;
  height: 30px;
  line-height: 30px;
  padding: 0;
  border-radius: 6px;
  background-color: #1ba687;
  text-align: center;
  color: #fff;
}
.el-button /deep/ span {
  margin-left: 0 !important;
}
.addChapter {
  margin-left: 30px;
  margin-top: 3px;
  text-align: center;
  width: 70px;
  height: 34px;
  line-height: 20px;
  border-radius: 6px;
  background-color: rgba(27, 166, 135, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  color: #fff;
}
.chapterList /deep/ .el-form-item__content {
  display: block !important;
  text-align: center;
  width: 350px;
}
.chapterList {
  margin-bottom: 0 !important;
  div {
    margin-left: 50px;
    text-align-last: left;
    height: 26px;
    line-height: 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #eee;
    margin-top: 5px;
    border-radius: 2px;
    span{
      a{
        color: blue;
        text-decoration: underline;
      }
    }
    &:last-child{
      margin-bottom: 22px;
    }
  }
}
</style>